<template>
  <div class="mine" @click="get1">
    <div class="head">
      <img :src="this.$store.state.user.avatarUrl" alt="">
      <div class="right">
        <p class="nick">用户名 ： {{this.$store.state.user.nickname}}</p>
        <p class="user">账户 ： {{this.$store.state.user.username}}</p>
      </div>
    </div>
    <p class="p1"><span>我的订单</span><a href="#">查看全部订单></a></p>
    <ul class="options">
        <li v-for="option in options" :key="option.id">
          <i class="iconfont" v-html="option.icon"></i>
          <p v-html="option.name"></p>
        </li>
    </ul>

    <p class="p2"><span>我的服务</span></p>
    <ul class="options">
        <li v-for="option in options1" :key="option.id">
          <i class="iconfont" v-html="option.icon"></i>
          <p v-html="option.name"></p>
        </li>
    </ul>

    <div class="prod-show">
        <div class="category">
          <van-divider
            :style="{ color: '#666', borderColor: '#666', padding: '0 16px' }"
          >
            猜你喜欢
          </van-divider>
        </div>
        <div class="card">
          <van-grid :border="false" :column-num="2" :gutter="5" :center="false">
            <van-grid-item class="van-grids" v-for="card in floors" :key="card.id" @click="jumpDetail(card.id)">
              <img :src="card.masterImg" alt="">
              <p class="title">{{card.name1}}</p>
              <div class="price">￥{{card.malMobilePrice}}</div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
  </div>
</template>

<script>
import { findLike } from '@/api/home'
import routes from '@/router/routes'
export default {
  name: 'Mine',
  data () {
    return {
      loading: true,
      options: [{
        icon: '&#xe6eb;',
        name: '收藏夹'
      },
      {
        icon: '&#xe6ef;',
        name: '关注店铺'
      },
      {
        icon: '&#xe6f0;',
        name: '足迹'
      },
      {
        icon: '&#xe6f2;',
        name: '卡券'
      },
      {
        icon: '&#xe6f3;',
        name: '红包'
      }
      ],
      options1: [{
        icon: '&#xe6f4;',
        name: '待付款'
      },
      {
        icon: '&#xe6f5;',
        name: '待发货'
      },
      {
        icon: '&#xe6f8;',
        name: '待收货'
      },
      {
        icon: '&#xe6f6;',
        name: '评价'
      }
      ],
      floors: []
    }
  },
  created () {
    findLike()
      .then(data => {
        this.floors = data
        console.log('数据', this.floors)
      })
      .catch(() => {})
  },
  methods: {
    get1 () {
      console.log(routes)
    },
    mounted () {
      this.loading = false
    },
    jumpDetail (id) {
      this.$router.push('/detail?id=' + id)
    }
  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* Project id 2787706 */
  src: url('//at.alicdn.com/t/font_2787706_1ewgflkqij8.woff2?t=1630649548813') format('woff2'),
       url('//at.alicdn.com/t/font_2787706_1ewgflkqij8.woff?t=1630649548813') format('woff'),
       url('//at.alicdn.com/t/font_2787706_1ewgflkqij8.ttf?t=1630649548813') format('truetype');
}


.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;}
.mine{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .head{
    width: 100%;
    height: 150px;
    background: linear-gradient(90deg,#dd9b4c,#ffd787);
    border-radius: 6px 6px 300px 300px/6px 6px 20px 20px;
    img{
      margin: 26px;
      border-radius: 50%;
    }
    .right{
      float: right;
      width: 63%;
      margin: 0 auto;
      p{
        color: #000;
        margin-top:30px;
        font-size: 16px;
      }
      .user{
        margin-top: 14px;
        font-size: 14px;
      }
    }
  }
}
.p1{
  width: 95%;
  background: #fff;
  margin: 0;
  margin-top: 10px;
  border-bottom:1px solid #ccc;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  display: flex;
  justify-content: space-between;
  span{
    font-size: 14px;
    margin:10px;
  }
  a{
    font-size: 14px;
    margin:10px;
    color: #333;
  }
}
.p2{
  width: 95%;
  background: #fff;
  margin: 0;
  margin-top: 20px;
  border-bottom:1px solid #ccc;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  display: flex;
  justify-content: space-between;
  span{
    font-size: 14px;
    margin:10px;
  }
  a{
    font-size: 14px;
    margin:10px;
    color: #333;
  }
}
.options{
    width: 95%;
    background: #fff;
    li{
      padding: 10px 0;
      height: 50px;
      float: left;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 25%;
      p{
        margin: 0;
        width: auto;
        font-size: 12px;
      }
      .iconfont{
        color: #dd9b4c;
        font-size: 36px;
      }
    }
  }

.prod-show{
  height: auto;
  .category{
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size:16px;
    color: #666;
  }
  .card{
    .van-grid{
      padding-top:5px;
      background:#f2f2f2;
    }
    .van-grids{
      font-size: 5px;
      img{
        width: 100%;
        height: 100%;
      }
      .price{
        color: #f00;
      }
    }
  }
}
</style>